<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
      <el-form-item label="客户编号" prop="companyCode">
        <el-input
            v-model="queryParams.companyCode"
            placeholder="请输入客户编号"
            clearable
            style="width: 200px"
            @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="客户简称" prop="companyName">
        <el-input
            v-model="queryParams.companyName"
            placeholder="请输入客户简称"
            clearable
            style="width: 200px"
            @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="客户全称" prop="fullName">
        <el-input
            v-model="queryParams.fullName"
            placeholder="请输入客户全称"
            clearable
            style="width: 200px"
            @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="报告时间" prop="reportTime">
        <el-date-picker
          clearable
          v-model="queryParams.reportTime"
          type="date"
          value-format="YYYY-MM-DD"
          placeholder="请选择报告时间"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item v-if = "isManage" label="区域代理" prop="deptId">
        <el-select
          v-model="queryParams.deptId"
          placeholder="区域代理"
          clearable
          style="width: 200px"
        >
                  <el-option
            v-for="dict in deptList"
            :key="dict.deptId"
            :label="dict.deptName"
            :value="dict.deptId"
          />

        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
     <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="download"
          size="mini"
          @click="handleCompanyOrderReport"
          v-hasPermi="['yanjing:order:handleCompanyOrderReport']"
          >导出</el-button
        >
      </el-col>
      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

        <el-table  :data="companyListTotal" >
      <el-table-column label="序号" type="index" width="60"></el-table-column>
      <!-- <el-table-column label="客户全称" align="center" prop="fullName" /> -->
            <el-table-column :resizable="false"  class-name="elChgTbeClmn" prop="fullName" label="客户全称">
              <template #header>
                  <div class="group-bias-divide">
                  <div class="top">科目</div>
                  <div class="bottom">统计</div>
                  </div>
              </template>
       <template #default="">
        <div  class="bold-25" align="center">
          {{ '合        计:'}}</div>
        </template>
            </el-table-column>
      <el-table-column label="累计销售(月)已下单数量" align="center" prop="productMonthCountTotal" />
      <el-table-column label="累计销售(月)已下单金额" align="center" prop="productMonthAmountYuanTotal" />
      <el-table-column label="累计销售(月)已发货数量" align="center" prop="productDeliveredMonthCountTotal" />
      <el-table-column label="累计销售(月)已发货金额" align="center" prop="productDeliveredMonthAmountYuanTotal" />
      <el-table-column label="当日销售数量" align="center" min-width="60"  prop="productDayCountTotal" />
      <el-table-column label="当日销售金额" align="center" min-width="60"  prop="productDayAmountYuanTotal" />
      <!-- <el-table-column label="业务员" align="center" prop="saleName" /> -->
      <el-table-column label="应付款" align="center" min-width="60" prop="productAmountYuanTotal" />
      <el-table-column label="已收款" align="center" min-width="60"  prop="productPayYuanTotal" />
      <el-table-column label="未收款" align="center" min-width="60"  prop="productUnPayYuanTotal" />
    </el-table>

    <el-table v-loading="loading" :data="companyList" @selection-change="handleSelectionChange">
      <el-table-column label="序号" type="index" width="60"></el-table-column>
      <el-table-column label="客户全称" align="center" prop="fullName" />
      <el-table-column label="累计销售(月)已下单数量" align="center" prop="productMonthCount" />
      <el-table-column label="累计销售(月)已下单金额" align="center" prop="productMonthAmountYuan" />
      <el-table-column label="累计销售(月)已发货数量" align="center" prop="productDeliveredMonthCount" />
      <el-table-column label="累计销售(月)已发货金额" align="center" prop="productDeliveredMonthAmountYuan" />
      <el-table-column label="当日销售数量" align="center" min-width="60"  prop="productDayCount" />
      <el-table-column label="当日销售金额" align="center" min-width="60"  prop="productDayAmountYuan" />
      <!-- <el-table-column label="业务员" align="center" prop="saleName" /> -->
      <el-table-column label="应付款" align="center" min-width="60"  prop="productAmountYuan" />
      <el-table-column label="已收款" align="center" min-width="60"  prop="productPayYuan" />
      <el-table-column label="未收款" align="center" min-width="60"  prop="productUnPayYuan"  />
    </el-table>
    <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
    />
  </div>
</template>

<script setup name="Post">
import {
  queryPageByParam,
  queryOrderTotalByParam
} from "@/api/welcome/companyReport.js";
import { listDept } from "@/api/system/dept.js";
import {  getDataByChildDictType } from "@/api/system/dict/data.js";
import useUserStore from '@/store/modules/user';
import { onMounted } from 'vue';

const { proxy } = getCurrentInstance();
const companyList = ref([]);
const deptList = ref([]);
const companyListTotal = ref([]);
const open = ref(false);
const loading = ref(true);
const isManage = ref(false);
const showSearch = ref(true);
const ids = ref([]);
const total = ref(0);
const defaultDeptId = ref(null);

//初始化
const myMethod = () => {
  
  const roles = useUserStore().roles;
var filteredArr = roles.filter(item => item !== 'manage' && item !== 'salesman');
if(filteredArr.length > 0){
  isManage.value = true;
}else{
  isManage.value =false;
}
  selectDataByChildDictType();
};
 
onMounted(myMethod);
const data = reactive({
  form: {},
  saleUserInfoChange(item) {
    form.value.saleId = item.userId
    form.value.saleName = item.nickName
  },
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    fullName: undefined,
    companyCode: undefined,
    companyName: undefined,
    reportTime: undefined
  }
});

const { queryParams, form} = toRefs(data);

/** 查询岗位列表 */
function getList() {
  loading.value = true;
        if(queryParams.value.reportTime == null || queryParams.value.reportTime == ""){
            queryParams.value.reportTime = getCurrentDate()
      }

  queryOrderTotalByParam(queryParams.value).then(response => {
    companyListTotal.value = [];
    companyListTotal.value.push(response.data);
  });
  queryPageByParam(queryParams.value).then(response => {
    companyList.value = response.rows;
    total.value = response.total;
    loading.value = false;
  });
  
}
function selectDataByChildDictType(){
    const dictValue = "mange_dept_id_key";
      getDataByChildDictType(dictValue).then(response => {
      // defaultDeptId.value = response.data.dictLabel;
      
      getlistDept(response.data.dictLabel);
      });
  }
/** 查询部门列表 */
function getlistDept(defaultDeptId) {
  const queryDeptListParams = {
    parentId : defaultDeptId
  };
  
  listDept(queryDeptListParams).then(response => {
    deptList.value = response.data;
  });
}
/**导出 */
function handleCompanyOrderReport(){
      if(queryParams.value.reportTime == null || queryParams.value.reportTime == ""){
            queryParams.value.reportTime = getCurrentDate()
      }
  
      proxy.download(
        "yanjing/companyReport/handleCompanyOrderReport",
        {
          ...queryParams.value,
        },
        `companyOrder_${new Date().getTime()}.xlsx`
      );
}
function getCurrentDate() {
      const today = new Date();
      const year = today.getFullYear();
      const month = (today.getMonth() + 1).toString().padStart(2, '0');
      const day = today.getDate().toString().padStart(2, '0');
      return `${year}-${month}-${day}`;
    }

/** 表单重置 */
function reset() {
  form.value = {
    postId: undefined,
    postCode: undefined,
    postName: undefined,
    paymentRatio: undefined,
    postSort: 0,
    companyStatus: null,
    creditFlag:'N',
    remark: undefined
  };
  selectedSaleUser.value = {
    userId: null,
    userName: null
    };
  proxy.resetForm("companyRef");
  handleQuery();
}
/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}
/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef");
  handleQuery();
}

getList();
</script>


<style lang='less' scoped>
  :deep(.group-bias-divide) {
    .top {
      text-align: right;
      padding-right: .5em;
      box-sizing: border-box;
    }

    .bottom {
      text-align: left;
      padding-left: 1em;
      box-sizing: border-box;

      &::before {
        content: "";
        position: absolute;
        width: 1px !important;
        height: 187px !important;
        top: auto !important;
        left: auto !important;
        bottom: 0 !important;
        right: 0 !important;
        background-color: #d6d6d6;
        display: block;
        transform: rotate(294deg);
        transform-origin: bottom;
      }
    }
  }

  .bold-16 {
  font-weight: bold; /* 设置字体加粗 */
  font-size: 16px;   /* 设置字体大小为25号 */
}
</style>
